<template>
  <div class="withdraw-records">
    <div class="grey-bg">
      <div class="header">
        <div class="back">
          <van-icon name="arrow-left" class="arrow-left" @click="handleBack" />
        </div>
        <div class="title">提币记录</div>
        <div class="placeholder"></div>
      </div>
      <div class="divider-container">
        <div class="divider"></div>
      </div>
      <div class="tabs-container">
        <div class="tabs">
          <div
            class="tab"
            :class="{ active: activeTab === 'deposit' }"
            @click="activeTab = 'deposit'"
          >
            充值记录
          </div>
          <div class="tab-divider"></div>
          <div
            class="tab"
            :class="{ active: activeTab === 'withdraw' }"
            @click="getRecord()"
          >
            提币记录
          </div>
        </div>
      </div>
    </div>

    <div class="records-list" v-if="activeTab === 'withdraw'">
      <div v-for="(record, index) in records" :key="index" class="record-item">
        <div class="record-header">
          <span class="currency">INR</span>
          <span class="time">{{ getTimeIp(record.createdAt) }}</span>
        </div>
        <div class="record-content">
          <div class="amount-row">
            <span class="label">提币数量</span>
            <span class="value">{{ record.amount }}</span>
          </div>
          <div class="amount-row">
            <span class="label">实际到账</span>
            <span class="value">{{ record.amount - record.fee }}</span>
          </div>
          <div class="status-row">
            <span class="label">提币状态</span>
            <div class="status-wrapper">
              <span
                class="status"
                :class="{
                  pending: record.status == 'PENDING',
                  success: record.status == 'SUCCESS',
                  failed: record.status == 'FAILED',
                }"
                >{{ getStatusText(record.status) }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="load-more">没有更多数据了</div>
  </div>
</template>

<script setup name="WithdrawRecord">
import { ref } from "vue";
import { Icon as VanIcon } from "vant";
import { AssetsApi } from "@/api/assets.ts";
import { getTimeIp } from "@/utils/calculator";
import { useRouter } from "vue-router";
const router = useRouter();
const activeTab = ref("deposit");

const records = ref([]);

const getStatusText = (status) => {
  const statusMap = {
    PENDING: "审核中",
    SUCCESS: "成功",
    FAILED: "失败",
  };
  return statusMap[status] || "";
};

const handleBack = () => {
  router.go(-1);
};
const init = () => {
  AssetsApi.getRecords({
    page: 0,
    size: 10,
  }).then((res) => {
    if (res.code == 200) {
      records.value = res.data.records;
    }
  });
};
const getRecord = () => {
  activeTab.value = "withdraw";
  init();
};
</script>

<style scoped>
.withdraw-records {
  min-height: 100vh;
  background: #121212;
  padding-bottom: 60px;
}

.grey-bg {
  background: #1e1e1e;
  padding-bottom: 12px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: #1e1e1e;
  position: relative;
  box-shadow: 0 2px 4px #0003;
}

.back {
  margin-top: 10px;
  margin-bottom: 5px;
  position: absolute;
  left: 15px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.title {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

.placeholder {
  width: 24px;
}

.divider-container {
  background: #1e1e1e;
  padding: 0 12px;
  margin-top: 12px;
}

.divider {
  height: 1px;
  background: #e5e5e5;
}

.tabs-container {
  background: #1e1e1e;
  padding: 0 12px;
}

.tabs {
  display: flex;
  background: #1e1e1e;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.tab {
  padding: 8px 20px;
  font-size: 14px;
  color: #b0b0b0;
  cursor: pointer;
  border-radius: 20px;
  background: white;
}

.tab.active {
  background: #0066ff;
  color: #fff;
  font-weight: 500;
}

.tab-divider {
  width: 1px;
  height: 20px;
  background: #e5e5e5;
  margin: 0;
}

.records-list {
  padding: 12px;
  margin-top: 0;
}

.record-item {
  background: #1e1e1e;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px #0003;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.currency {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.time {
  font-size: 13px;
  color: #b0b0b0;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.label {
  color: #b0b0b0;
}

.value {
  font-weight: 500;
  color: #fff;
}

.status-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.status.pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.status.success {
  color: #07c160;
  background-color: #e7f7ef;
}

.status.failed {
  color: #ee0a24;
  background-color: #fdebed;
}

.load-more {
  text-align: center;
  padding: 15px;
  color: #b0b0b0;
  font-size: 14px;
}
.arrow-left{
    color: #fff;
}
</style>
